<template>
    <div class="main">
        <!--顶栏-->
        <!--<el-row>-->
            <!--<el-col :span="24" class="title_area">-->
                <!--<h4>点餐管理</h4>-->
                <!--<el-breadcrumb separator="/">-->
                    <!--<el-breadcrumb-item :to="{ path: '/indexpage' }">首页</el-breadcrumb-item>-->
                    <!--<el-breadcrumb-item>点餐列表</el-breadcrumb-item>-->
                <!--</el-breadcrumb>-->
            <!--</el-col>-->
        <!--</el-row>-->

        <el-row>
            <el-col :span="24" class="title_area">
                <h4>点餐管理</h4>
            </el-col>
        </el-row>

        <!--搜索栏-->
        <div class="search_panel">
            <el-row class="diancanliebiao">
                <span>点餐列表</span>
            </el-row>
            <el-row>
                <el-col :span="16" class="jiange">
                    <el-input v-model="order_number" placeholder="单号"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="jiange">
                    <el-input type="number" v-model="start" placeholder="金额（起始）"></el-input>
                </el-col>
                <el-col :span="4" class="jiange">
                    <el-input type="number" v-model="end" placeholder="金额（截止)"></el-input>
                </el-col>

                <el-col :span="6" class="jiange">
                    <el-button type="primary"  class="btn_login" @click="orderList"><i class="el-icon-search"></i>查询</el-button>
                </el-col>
            </el-row>
        </div>

        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column prop="order_number" label="单号"></el-table-column>
            <el-table-column prop="sort_number" label="序号"></el-table-column>
            <el-table-column prop="status" label="支付状态"></el-table-column>
            <el-table-column prop="order_status" label="上菜状态"></el-table-column>
            <el-table-column  label="操作" width="200">
                <template scope="scope">
                    <el-button v-if="scope.row.order_status == '完成'"  type="default" size="small" @click="completeOrder(scope.$index,tableData)">完成</el-button>
                    <el-button v-if="scope.row.order_status != '完成'" type="default" size="small" @click="updateOrderOrder(scope.$index,tableData)">完成上菜</el-button>
                    <el-button  type="default" size="small" @click="orderDetail(scope.$index,tableData)">订单详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination class="pagination"
                background
                layout="prev, pager, next"
                pagesize="20"
                :total="pagination.total_pages">
        </el-pagination>


    </div>
</template>
<script>

  export default {
    data() {
      return {
        options: [{
          value: 'price',
          label: '原价'
        }, {
          value: 'discount',
          label: '折扣价'
        }, {
          value: 'score',
          label: '评分'
        }],
        prop: '',
        className:'right',
        tableData:[],
        order_number: '',
        author: '',
        start: '',
        end: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100
      }
    },
    components: {

    },

    created() {
      this.orderList()
    },

    methods: {

      completeOrder(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('completeOrder', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '订单完成',
              type: 'success'
            });
            this.orderList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })
      },

      updateOrderOrder(index, table) {//updateOrderOrder
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('updateOrderOrder', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '完成上菜',
              type: 'success'
            });
            this.orderList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })
      },

      relationBookBookCategory(index, table) {
        var id = table[index].id
        this.$router.push({name: 'addBookBookCategory', params: {id: id}})
      },

      orderDetail(index, table) {
        var id = table[index].id
        this.$router.push({name: 'orderDetail', params: {id: id}})
      },

      changeRight(value) {
        this.className = value
      },

      orderList() {
        let params = {
          order_number: this.order_number,
          start: this.start,
          end: this.end
        }

        this.$store.dispatch('orderList', params).then((ret) => {
          this.tableData = ret.data.orders.data
          this.pagination.pagination  = ret.data.orders.meta.pagination
        })

      },

      createPosition() {
        this.$router.push({ name: "createPosition" });
      }
    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
    .main {background: #f3f3f3}
    .search_panel {width: 60%; height: 200px; background: #fff}
    .diancanliebiao {font-size: 25px; font-weight: 500; padding: 15px 30px}
    .jiange {height:60px; }
    .el-input { height: 60px; line-height: 60px }
</style>
